<template>
    <div>
        <el-row>
            <el-col :span="5">
                <el-input placeholder="角色名称" v-model="role.qroleName"></el-input>
            </el-col>
            <el-col :offset="1" :span="3">
                <el-button @click="handleQuery(1)" type="primary">查询</el-button>
            </el-col>
            <el-col :offset="12" :span="3">
                <el-button @click="handleAdd()" type="primary">
                    <i class="el-icon-circle-plus"></i>
                    新增角色
                </el-button>
            </el-col>
        </el-row>
        <el-row class="mt-40">
            <el-col>
                <el-table :data="tableData" :style="widthObj">
                    <el-table-column
                            align="center"
                            label="序号"
                            type="index"

                    />
                    <el-table-column
                            align="center"
                            label="角色名称"
                            type="rolename"

                    >
                        <template slot-scope="scope">
                            {{scope.row.rolename}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="备注信息"
                            type="remark"

                    >
                        <template slot-scope="scope">
                            {{scope.row.remark}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作"
                            type="handle"

                    >
                        <template slot-scope="scope">
                            <el-button
                                    @click="handleAdd(scope.row)"
                                    size="small"
                            >
                                修改
                            </el-button>
                            <el-button
                                    @click="handleDel(scope.row)"
                                    size="small"
                                    type="primary"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="mt-40" justify="end" type="flex">
            <el-pagination
                    :current-page="pages.curPage"
                    :page-size="10"
                    :page-sizes="[5,10]"
                    :total="pages.totalCount"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total,sizes,prev,pager,next,jumper"
            >
            </el-pagination>
        </el-row>
        <role-message-model
                :dialog="dialog"
                :roleForm="roleForm"
                @update="handleQuery"
        ></role-message-model>
        <error-dialog @del="handleDelId">
            <template slot="body">
                <p class="tc ft-18">你确定要删除本条记录吗？</p>
            </template>
        </error-dialog>
    </div>
</template>
<script lang="ts">
  import { Vue, Component } from "vue-property-decorator";
  import { Dialog, Pages, RoleForm } from "@/interface/interface";
  import { queryrole, roleDel } from "@/api/api";
  import RoleMessageModel from "@/views/rightsmanagement/permissmodels/RoleMessageModel.vue";
  import {Message} from 'element-ui'
  import ErrorDialog from "@/components/ErrorDialog.vue";
  import {State,Mutation} from 'vuex-class'
  interface Role {
    qroleName: string,
  }

  @Component({
    components: { ErrorDialog, RoleMessageModel }
  })
  export default class RoleManage
    extends Vue {
    private name!: "RoleManage";
    @State('isVisible') private handleStateVisible:any;
    @State('id') private  handleId:any;
    @Mutation('handleVisible') private  handleMutationVisible:any;
    private role: Role = {
      qroleName: ""
    };
    private tableData: any[] = [];
    private widthObj = {
      width: "100%"
    };
    private pages: Pages = {
      totalCount: 0,
      curPage: 0,
      pageNum: 1
    };
    private dialog:Dialog={
      isDialog:false,
      options:'',
      title:'',
    };
    private roleForm:RoleForm={
      rolename:'',
      allowauditprocessstate:'0',
      remark:'',
    }
    private get roldId(){
      return this.handleId
    }
    private async created() {
      await this.handleQuery<number>(1);
    }

    /*查询*/
    private async handleQuery<T>(pageNum: T) {
      const { qroleName } = this.role;
      const res = await queryrole({ qroleName, pageNum });
      if (res) {
        const { object, success } = res;
        if (success) {
          const { datas, ...pages } = object;
         const result= datas.map((val: any)=>{

            val.allowauditprocessstate=val.allowauditprocessstate.toString();
           return val
          })
          this.tableData = result;
          this.pages = pages;

        } else {
          this.$message({
            type: "error",
            message: "数据出错"
          });
        }
      } else {
        this.$message({
          type: "error",
          message: "数据出错"
        });
      }


    }

    /*分页*/
    handleSizeChange(val: any) {

    }

    handleCurrentChange(val: any) {
      this.handleQuery<number>(val);
    }

    /*添加*/
    private handleAdd(params: any) {
        if(params){
          Object.assign(this.roleForm,params);
          this.dialog={
            isDialog:true,
            options:'edit',
            title:'角色管理',
          }
        }else{
          this.roleForm={
            rolename:'',
            allowauditprocessstate:'1',
            remark:'',
          }
          this.dialog={
            isDialog:true,
            options:'add',
            title:'角色管理'
          }

        }
    }

    /*删除模态框开启*/
    private handleDel(params: any) {
      const {id}=params;
      const visible= !this.handleStateVisible;
      this.handleMutationVisible({id:id,isVisible:visible})

    }
    /*删除操作*/
   private async handleDelId(){
    const res=await roleDel({roldId:this.roldId});
     if(res){
       const {success,message,object}=res;
       if(success){
            this.handleQuery(1);
            this.$message({
              type:'success',
              message:'删除成功',
            })
       }else{
         this.$message({
           type:'error',
           message:'删除失败',
         })
       }
     }
   }


  }
</script>

<style lang="scss" scoped>
</style>
